<template>
	<view>
		<u-loading-page :loading="loadding" loading-mode="semicircle" loading-text="Hello Pro"></u-loading-page>
		<view v-if="!loadding && data.length > 0" class="main">
			<view class="list">
				<view class="item" v-for="(item, index) in data" :key="index">
					<view class="terminal">
						<view class="sn">
							<view class="">
								<text>{{item.user_name}}</text>
							</view>
							<view class="">
								<text>SN:</text>
								<text>{{item.sn}}</text>
							</view>
						</view>
						<view class="bindTime">
							<text>{{item.binding_time}}</text>
						</view>
					</view>
					<view class="standard">
						<view class="standard-con" v-for="(items, indexs) in item.standard" :key="indexs">
							<view class="title">
								<view class="condition">
									<text class="font-red">{{items.start}}</text>
									<text> ~ </text>
									<text class="font-red">{{items.end}}</text>
									<text>天内，交易达到</text>
									<text class="font-red">{{Number(items.require_money)}}</text>
								</view>
								<view class="money">
									+{{Number(items.reward)}}
								</view>
							</view>
							<view class="content">
								<view class="total">
									<text v-if="Number(items.total_money) >= Number(items.require_money)"
										class="font-red">{{Number(items.require_money)}}</text>
									<text v-else class="font-red">{{Number(items.total_money)}}</text>
									/
									<text class="font-red">{{Number(items.require_money)}}</text>
								</view>
								<view class="states">
									<text v-if="items.status === 1" class="yes_standard">已达标</text>
									<text v-else-if="items.status === 0" class="not_standard">未达标</text>
									<text v-else-if="items.status === 2" class="expired">已过期</text>
								</view>
							</view>
							<image v-if="items.status === 1" src="../../../../static/success.png" class="success">
							</image>
							<image v-if="items.status === 2" src="../../../../static/expired.png" class="success">
							</image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-empty v-else mode="data" icon="/static/Empty/data_null.png"></u-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadding: true,
				userinfo: {},
				data: [],
				product_id: null,
				page: 1,
				page_size: 10
			}
		},
		onLoad(e) {
			this.product_id = e.id
			this.userinfo = uni.getStorageSync('userinfo')
			this.loadData()
		},
		methods: {
			// 加载数据
			async loadData() {
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Setting/getStandardRecord',
					data: {
						product_id: this.product_id
					},
					header: {
						'token': this.userinfo.token
					}
				});
				this.loadding = false
				if (res.code == 1) {
					this.data = res.data
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f3f4f6;
	}

	.main {
		padding: 20rpx;

		.list {
			.item {
				background-color: #ffffff;
				padding: 20rpx 0;
				border-radius: 10rpx;
				margin-bottom: 20rpx;

				.terminal {
					display: flex;
					justify-content: space-between;
					padding: 0 20rpx 20rpx 20rpx;
					border-bottom: 1px solid #c8c9cc;

					.sn {
						font-size: 28rpx;
						font-weight: bold;
					}

					.bindTime {
						display: flex;
						justify-content: flex-start;
						font-size: 24rpx;
						align-items: center;
						color: #c8c9cc;

						text {
							padding-left: 10rpx;
						}
					}
				}

				.standard {
					padding: 0 20rpx;
					font-size: 30rpx;

					.standard-con {
						box-shadow: 7px 0px 30px -18px #82848a;
						padding: 16rpx;
						margin-top: 20rpx;
						position: relative;

						.title {
							display: flex;
							justify-content: space-between;
							font-size: 28rpx;
							border-bottom: 1px dashed #f4f4f5;
							padding-bottom: 10rpx;

							.money {
								color: #fa3534;
								font-weight: bold;
							}
						}

						.content {
							display: flex;
							justify-content: space-between;
							padding-top: 10rpx;

							.states {
								font-weight: bold;

								.not_standard {
									color: #fa3534;
								}

								.yes_standard {
									color: #2979ff;
								}
								
								.expired {
									color: #c8c9cc;
								}
							}
						}

						.success {
							position: absolute;
							top: 16rpx;
							right: 120rpx;
							width: 100rpx;
							height: 100rpx;
						}
					}
				}
			}
		}
	}

	.font-red {
		color: #fa3534;
	}
</style>